<template>
  <view class="nav-menu">
    <view class="menu-item" v-for="(item, index) in menuList" :key="index" @tap="handleNavClick(item)">
      <image class="icon" :src="item.icon" mode="aspectFit" />
      <text class="text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'NavMenu',
  data() {
    return {
      menuList: [
        { icon: '/static/icons/new.png', text: '新人专区' },
        { icon: '/static/icons/earn.png', text: '赚积分' },
        { icon: '/static/icons/tea.png', text: 'TEA+1' },
        { icon: '/static/icons/agent.png', text: '代理申请' },
        { icon: '/static/icons/gift.png', text: '品鉴分享' }
      ]
    }
  },
  methods: {
    handleNavClick(item) {
      // 处理导航点击
      uni.navigateTo({
        url: item.path || '/pages/index/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-menu {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  background: #fff;
  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 10rpx;
    }
    .text {
      font-size: 24rpx;
      color: #333;
    }
  }
}
</style> 